<template>
  <component
    :is="getdisplayBoardItem"
    :width="props.info.width"
    :indexs="props.indexs"
    :height="props.info.height"
    :info="props.info"
    :childId="props.childId"
    :AuxiliaryId="props.AuxiliaryId"
    @emitChildItemDraggable="emitChildItemDraggable"
    @emitChildItemDraggableStyle="emitChildItemDraggableStyle"
    @emitShowcaseDraggable="emitShowcaseDraggable"
    @emitShowcaseDraggableStyle="emitShowcaseDraggableStyle"
    @onContextMenuChild="onContextMenuChild"
  ></component>
</template>

<script setup lang="ts">
// @ts-nocheck
import free99Style1 from './stylePublic/style1.vue';
import free99Style2 from './stylePublic/style2.vue';

import style1 from './style/style1.vue';
import style2 from './style/style2.vue';
import style3 from './style/style3.vue';
import style4 from './style/style4.vue';
import style5 from './style/style5.vue';
import style6 from './style/style6.vue';
import free2Style1 from './style2/style1.vue';
import free3Style1 from './style3/style1.vue';
import free3Style2 from './style3/style2.vue';
import free3Style3 from './style3/style3.vue';
import free3Style4 from './style3/style4.vue';
import free3Style5 from './style3/style5.vue';
import free4Style1 from './style4/style1.vue';
import free4Style2 from './style4/style2.vue';
import free4Style3 from './style4/style3.vue';
import free4Style4 from './style4/style4.vue';
import free4Style5 from './style4/style5.vue';
import free4Style6 from './style4/style6.vue';
import free5Style1 from './style5/style1.vue';
import free5Style2 from './style5/style2.vue';
import free5Style3 from './style5/style3.vue';
import free5Style4 from './style5/style4.vue';
import free5Style5 from './style5/style5.vue';
import free5Style6 from './style5/style6.vue';
import free6Style1 from './style6/style1.vue';
import free6Style2 from './style6/style2.vue';
import free6Style3 from './style6/style3.vue';
import free6Style4 from './style6/style4.vue';
import free6Style5 from './style6/style5.vue';
import free6Style6 from './style6/style6.vue';
import free7Style1 from './style7/style1.vue';
import free7Style2 from './style7/style2.vue';
import free7Style3 from './style7/style3.vue';
import free8Style1 from './style8/style1.vue';
import free8Style2 from './style8/style2.vue';
import free8Style3 from './style8/style3.vue';
import free8Style4 from './style8/style4.vue';
import free8Style5 from './style8/style5.vue';
import free8Style6 from './style8/style6.vue';
import free9Style1 from './style9/style1.vue';
import free9Style2 from './style9/style2.vue';
import free9Style3 from './style9/style3.vue';
import free9Style4 from './style9/style4.vue';
import free9Style5 from './style9/style5.vue';
import free11Style1 from './style11/style1.vue';
import free11Style2 from './style11/style2.vue';
import free11Style3 from './style11/style3.vue';
import free11Style4 from './style11/style4.vue';
import free11Style5 from './style11/style5.vue';
import free11Style6 from './style11/style6.vue';
import free11Style7 from './style11/style7.vue';
import free11Style8 from './style11/style8.vue';
import free10Style1 from './style10/style1.vue';
import free10Style2 from './style10/style2.vue';
import free10Style3 from './style10/style3.vue';
import free10Style4 from './style10/style4.vue';
import free10Style5 from './style10/style5.vue';
import free12Style1 from './style12/style1.vue';
import free12Style2 from './style12/style2.vue';
import free12Style3 from './style12/style3.vue';
import free13Style1 from './style13/style1.vue';
import free13Style2 from './style13/style2.vue';
import free13Style3 from './style13/style3.vue';
import free13Style4 from './style13/style4.vue';
import free14Style1 from './style14/style1.vue';
import free14Style2 from './style14/style2.vue';
import free14Style3 from './style14/style3.vue';
import free15Style1 from './style15/style1.vue';
import free15Style2 from './style15/style2.vue';
import free15Style3 from './style15/style3.vue';
import free16Style1 from './style16/style1.vue';
import free16Style2 from './style16/style2.vue';
import free16Style3 from './style16/style3.vue';
import free17Style1 from './style17/style1.vue';
import free17Style2 from './style17/style2.vue';
import draggableShowcase from '@/freeComponents/Showcase/draggableShowcase.vue'; //展柜
import { DraggableContainer } from 'vue3-draggable-resizable';
import draggableChildItem from './draggableChildItem.vue';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';
import ContextMenu from '@imengyu/vue3-context-menu';
import { getDraggableNumber, getExhibitsHeightRest, getdisabledY } from '@/utils/getRemComputed';
import { ref, reactive, watch, nextTick, computed } from 'vue';
import { exbitMenuShow, exbitListMenuShow } from '@/hooks/menuHooks';
import { useProjectStore } from '@/store';
import { useRoute } from 'vue-router';
const emit = defineEmits([
  'emitChildItemDraggable',
  'emitChildItemDraggableStyle',
  'emitShowcaseDraggable',
  'emitShowcaseDraggableStyle',
]);
const route = useRoute();
const store = useProjectStore();
const contextMenuTrigger = ref(); //列表盒子dom
const parentLock = ref(true);
const childShow = ref(true);
const draggableResizable = ref(); //父级拖拽盒子ref
const timer = ref();

const props = defineProps({
  selectInfo: {
    type: Object,
  },
  width: {
    type: Number || String,
  },
  height: {
    type: Number || String,
  },
  indexs: {
    type: Number,
  },
  info: {
    type: Object,
  },
  childId: {
    type: Number,
  },
  AuxiliaryId: {
    type: Number,
  },
});
const emitChildItemDraggable = (draggingInfo: any, childIndex: number) => {
  emit('emitChildItemDraggable', draggingInfo, childIndex); //分组传递当前展品图距离相对父元素的xy偏移量变化
};
const emitChildItemDraggableStyle = (draggingInfo: any, childIndex: number) => {
  emit('emitChildItemDraggableStyle', draggingInfo, childIndex); //分组设置当前展品图距离相对父元素的宽高变化
};
const emitShowcaseDraggable = (draggingInfo: any) => {
  emit('emitShowcaseDraggable', draggingInfo); //传递当前展柜图距离相对父元素的xy偏移量变化
};
const emitShowcaseDraggableStyle = (draggingInfo: any) => {
  emit('emitShowcaseDraggableStyle', draggingInfo); //传递当前展柜距离相对父元素的宽高变化
};
const onContextMenuChild = (e, index) => {
  e.preventDefault();
  if (route.meta.loopType) {
    return;
  }
  store.contextmenuchildId = props.childId;
  store.contextmenuGroupId = props.indexs;
  store.contextmenuExhibitId = index;
  exbitMenuShow(e, props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1);
};
const getdisplayBoardItem = computed(() => {
  switch (props.selectInfo.id) {
    case 995001:
      return free99Style1;
      break;
    case 995002:
      return free99Style2;
      break;
    case 15001:
      return style1;
      break;
    case 15002:
      return style2;
      break;
    case 15003:
      return style3;
      break;
    case 15004:
      return style4;
      break;
    case 15005:
      return style5;
      break;
    case 15006:
      return style6;
      break;
    case 25001:
      return free2Style1;
      break;
    case 35001:
      return free3Style1;
      break;
    case 35002:
      return free3Style2;
      break;
    case 35003:
      return free3Style3;
      break;
    case 35004:
      return free3Style4;
      break;
    case 35005:
      return free3Style5;
      break;
    case 45001:
      return free4Style1;
      break;
    case 45002:
      return free4Style2;
      break;
    case 45003:
      return free4Style3;
      break;
    case 45004:
      return free4Style4;
      break;
    case 45005:
      return free4Style5;
      break;
    case 45006:
      return free4Style6;
      break;
    case 55001:
      return free5Style1;
      break;
    case 55002:
      return free5Style2;
      break;
    case 55003:
      return free5Style3;
      break;
    case 55004:
      return free5Style4;
      break;
    case 55005:
      return free5Style5;
      break;
    case 55006:
      return free5Style6;
      break;
    case 65001:
      return free6Style1;
      break;
    case 65002:
      return free6Style2;
      break;
    case 65003:
      return free6Style3;
      break;
    case 65004:
      return free6Style4;
      break;
    case 65005:
      return free6Style5;
      break;
    case 65006:
      return free6Style6;
      break;
    case 75001:
      return free7Style1;
      break;
    case 75002:
      return free7Style2;
      break;
    case 75003:
      return free7Style3;
      break;
    case 85001:
      return free8Style1;
      break;
    case 85002:
      return free8Style2;
      break;
    case 85003:
      return free8Style3;
      break;
    case 85004:
      return free8Style4;
      break;
    case 85005:  
      return free8Style5;
      break;
    case 85006:
      return free8Style6;
      break;
    case 95001:
      return free9Style1;
      break;
    case 95002:
      return free9Style2;
      break;
    case 95003:
      return free9Style3;
      break;
    case 95004:
      return free9Style4;
      break;
    case 95005:
      return free9Style5;
      break;
    case 105001:
      return free10Style1;
      break;
    case 105002:
      return free10Style2;
      break;
    case 105003:
      return free10Style3;
      break;
    case 105004:
      return free10Style4;
      break;
    case 105005:
      return free10Style5;
      break;
    case 115001:
      return free11Style1;
      break;
    case 115002:
      return free11Style2;
      break;
    case 115003:
      return free11Style3;
      break;
    case 115004:
      return free11Style4;
      break;
    case 115005:
      return free11Style5;
      break;
    case 115006:
      return free11Style6;
      break;
    case 115007:
      return free11Style7;
      break;
    case 115008:
      return free11Style8;
      break;
    case 125001:
      return free12Style1;
      break;
    case 125002:
      return free12Style2;
      break;
    case 125003:
      return free12Style3;
      break;
    case 135001:
      return free13Style1;
      break;
    case 135002:
      return free13Style2;
      break;
    case 135003:
      return free13Style3;
      break;
    case 135004:
      return free13Style4;
      break;
    case 145001:
      return free14Style1;
      break;
    case 145002:
      return free14Style2;
      break;
    case 145003:
      return free14Style3;
    case 155001:
      return free15Style1;
      break;
    case 155002:
      return free15Style2;
      break;
    case 155003:
      return free15Style3;
    case 165001:
      return free16Style1;
    case 165002:
      return free16Style2;
    case 165003:
      return free16Style3;
    case 175001:
      return free17Style1;
    case 175002:
      return free17Style2;
    default:
      return style1;
      break;
  }
});
const handleMouseDown = (event) => {
  event.stopPropagation();
};
const preventDefaultDrag = (event) => {
  event.stopPropagation();
};
// watch(
//   () => props.info.width,
//   () => {
//     childShow.value = false;
//     nextTick(() => {
//       childShow.value = true;
//     });
//   },
//   { deep: true },
// );
// watch(
//   () => props.info.height,
//   () => {
//     childShow.value = false;
//     nextTick(() => {
//       childShow.value = true;
//     });
//   },
//   { deep: true },
// );

//
</script>

<style lang="less" scoped>
.exhibits-content {
  position: relative;
  display: flex;
  z-index: 999;
  padding: 10px;
}

.active {
  :deep(.flot-menu) {
    display: flex;
  }
}
:deep(.active) {
  z-index: 999;
}
:deep(.vdr-handle) {
  z-index: 66;
}
</style>
